<template>
  <el-row :gutter="18">
    <el-col :span="6">
      <Button @click="handleShow" type="primary">开启水印</Button>
    </el-col>
    <el-col :span="12">
      <el-input v-model="markText" placeholder="请输入"></el-input>
    </el-col>
    <el-col :span="6">
      <Button :disabled="!watermarkInstance" @click="handleModify">
        修改水印
      </Button>
    </el-col>
  </el-row>
  <el-divider></el-divider>
  <Button @click="handleClose" type="danger">关闭水印</Button>
</template>

<script lang="ts" setup>
import { Button, watermark } from "leisure-lib";
import { ref } from "vue";
const watermarkInstance = ref(null);
const markText = ref("i am wm");
const handleShow = () => {
  watermarkInstance.value = watermark.show("from: leisure-lib");
};

const handleClose = () => {
  watermarkInstance.value.close();
};
const handleModify = () => {
  watermarkInstance.value.change(markText.value);
};
</script>

<style></style>
